<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="lib/validform/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	
	</head>
	<body>
		
		<div class="logo">
			<img src="./img/login_img/login_03.png" alt="">
		</div>
		<form action="/api/user/login" class="form">	
			<div><input type="text" value="" name="username" id="username" placeholder="用户名" datatype='s3-15' errormsg='账号应为3-15位字符!' /></div>
			<div><input type="password" name="password" id="password" value="" placeholder="请输入密码" datatype='n3-15' errormsg='密码应为3-15位数字!' /></div>
		<button type="submit" class="loginbtn">登录</button>
		</form>
		<div class="service">
			<a class="forget" href="#" target="_blank">忘记密码?</a>
			<a class="register" href="#" target="_blank">注册</a>
		</div>
		<div class="login-title">
			<div class="login-line"></div>
			<div class="login-word">其他登录方式</div>
			<div class="login-line"></div>
		</div>
		<div class="login-method">
			<div>
				<a href="">
					<img src="./img/login_img/login_09.png" alt="">
					<span>微信</span>
					</a>
			</div>
			<div>
				<a href="">
					<img src="./img/login_img/login_12.png" alt="">
					<span>QQ</span>
					</a>
			</div>
			<div>
				<a href="">
					<img src="./img/login_img/login_06.png" alt="">
					<span>微博</span>
					</a>
			</div>
		</div>
		
		<script src="lib/jquery/jquery-3.6.0.min.js"></script>
	<script src="lib/validform/js/Validform_v5.3.2_min.js"></script>
	<script src="lib/layer/layer.js"></script>
	<script>
	
	
	// 表单验证
	$('.form').Validform({
		tiptype:4,
		ajaxPost:true,
		callback:function(res){
			if(res.status){
				//登录成功
				layer.msg(res.msg);
				//储存数据
				sessionStorage.id=res.data.id;
				sessionStorage.token=res.data.token;
				
				//跳转页面
				location.assign('./index.html')
			} else{
				//登陆失败
				layer.msg(res.msg)
			}
		}
	})
	// $('.loginbtn').click(function(){
	// 	//提取表单
	// 	var name=$('#username').val();
	// 	var psd=$('#password').val();
	// 	//表单验证
	// 	$.post('/api/user/login',{username:name,password:psd},function(res){
		
	// 		if(res.status){
	// 			//登录成功
	// 			alert(res.msg);
	// 			//跳转页面
	// 			location.assign('./index.html')
	// 		} else{
	// 			//登陆失败
	// 			alert(res.msg)
	// 		}
	// 	});
		
	// })
	
	</script>
	</body>
</html>
